<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增航班信息</title>
    <style>
        body {
            background-color: #f8f9fa;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            max-width: 500px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            color: #343a40;
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-top: 10px;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ced4da;
            border-radius: 4px;
        }
        button {
            margin-top: 15px;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .cancel-btn {
            background-color: #6c757d;
            color: white;
        }
        .submit-btn {
            background-color: #007bff;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>新增航班信息</h1>
        <form id="flight-form">
            <label for="flight-no">航班号:</label>
            <input type="text" id="flight-no" required><br>
            
            <label for="airline">航空公司:</label>
            <input type="text" id="airline" required><br>
            
            <label for="dep-airport">出发机场:</label>
            <select id="dep-airport" required>
                <option value="">请选择出发机场</option>
            </select><br>

            <label for="arr-airport">到达机场:</label>
            <select id="arr-airport" required>
                <option value="">请选择到达机场</option>
            </select><br>

            <label for="dep-date">起飞日期:</label>
            <input type="date" id="dep-date" required><br>
            
            <label for="dep-time">起飞时间:</label>
            <input type="time" id="dep-time" required><br>
            
            <label for="arr-date">到达日期:</label>
            <input type="date" id="arr-date" required><br>
            
            <label for="arr-time">到达时间:</label>
            <input type="time" id="arr-time" required><br>
            
            <label for="status">状态:</label>
            <select id="status" required>
                <option value="0">正常</option>
                <option value="1">取消</option>
            </select><br>
            
            <label for="base-price">基础票价:</label>
            <input type="number" step="0.01" id="base-price" required><br>
            
            <button type="submit" class="submit-btn">保存</button>
            <button type="button" onclick="cancelAdd()" class="cancel-btn">取消</button>
        </form>
    </div>

    <script>
        // 获取机场列表并填充到下拉框中
        fetch('/api/airports')
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(airports => {
                console.log('接收到的机场数据:', airports); // 打印接收到的数据以供调试

                const depAirportSelect = document.getElementById('dep-airport');
                const arrAirportSelect = document.getElementById('arr-airport');

                // 清空现有选项
                depAirportSelect.innerHTML = '<option value="">请选择出发机场</option>';
                arrAirportSelect.innerHTML = '<option value="">请选择到达机场</option>';

                // 填充新选项
                airports.forEach(airport => {
                    const option1 = document.createElement('option');
                    option1.value = airport;
                    option1.textContent = airport;
                    depAirportSelect.appendChild(option1);

                    const option2 = document.createElement('option');
                    option2.value = airport;
                    option2.textContent = airport;
                    arrAirportSelect.appendChild(option2);
                });
            })
            .catch(error => {
                console.error('Error fetching airports:', error);
                alert('无法加载机场数据，请检查网络或联系管理员');
            });

        // 提交表单时使用机场名称
        document.getElementById('flight-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = {
                flightNo: document.getElementById('flight-no').value,
                airline: document.getElementById('airline').value,
                depAirport: document.getElementById('dep-airport').value,
                arrAirport: document.getElementById('arr-airport').value,
                depDate: document.getElementById('dep-date').value,
                depTime: document.getElementById('dep-time').value,
                arrDate: document.getElementById('arr-date').value,
                arrTime: document.getElementById('arr-time').value,
                status: parseInt(document.getElementById('status').value),
                basePrice: parseFloat(document.getElementById('base-price').value)
            };

            fetch('/api/flights', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
            .then(() => {
                alert('航班信息已新增');
                window.location.href = '/flights.html';
            })
            .catch(error => console.error('Error adding flight:', error));
        });

        // 取消按钮逻辑
        function cancelAdd() {
            window.location.href = '/flights.html'; // 返回航班列表页面
        }
    </script>
</body>
</html>